<script setup>
  //声明一些数据
  let msg = "这是一段话"
  //声明一个方法
  let getMsg = () => {
    return msg
  }

  //声明变量
  let age = 19
  let bee = '蜜 蜂'
  //定义购物车
  const cars = [{name: "薯片", price: 3, number: 10}, {name: "香蕉", price: 5, number: 3}]

  //计算购物车中商品的总价
  function getPrice() {
    //定义一个计算总价的变量
    let count = 0
    for (let index in cars) {
      count += cars[index].price * cars[index].number
    }
    return count
  }
  let greenMsg = '<font color=\'red\'>msg</font>'
  greenMsg = `<font color=\'red\'>${msg}</font>`
</script>

<template>
  <div>
    <!--使用插值表达式来进行数据的渲染-->
    张三说:{{ msg }}<br>
    方法的返回值为：{{ getMsg() }}<br>
    是否成年：{{ age > 18 ? '成年' : '未成年' }}<br>
    <!--在插值表达式中使用API-->
    实现反转：{{bee.split('').reverse().join('-')}}<br>
    购物车的总金额：{{getPrice()}}
    <!--只能渲染文本-->
    <p v-text="msg"></p>
    <p v-html="greenMsg"></p>
    <p></p>
  </div>

</template>

<style scoped>

</style>